<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/template/templateGeral.xhtml">
	<ui:define name="main">
	    
	    <div id="infoEstado">
	    	
	    </div>
	    
	   <div id="graficos">	   
					
					<div id="infGeral" class="left grafico">
						<h2>Informações gerais</h2>
						
						<h:form id="dadosGerais">
						
						<table>
							  <tbody>
							   
							    <tr>
							      <td>Quantidade de empreendimentos</td>
							      <td><h:outputText value="#{brasilBean.brasil.total_emp}"></h:outputText></td>
							    </tr>
							    <tr class="alter">
							      <td>Investimento total</td>
							      <td><h:outputText value="#{brasilBean.brasil.investTotal}"></h:outputText></td>
							    </tr>
							    <tr class="alter">
							      <td>Valor médio dos empreendimentos</td>
							      <td><h:outputText value="#{brasilBean.brasil.mediaInvest}"></h:outputText></td>
							    </tr>
							   
							  </tbody>
						</table>
						
						</h:form>
					</div>
					
					<div id="gastoSubeixoBrasil" class="right grafico"></div>
					
					<!--  <div id="topMunicipiosBrasil" class="left grafico"></div>-->
					
					<div id="andamentoEmpBrasil" class="right grafico"></div>
					
			
					
					
					<div class="clear"></div>
					
		</div>
	    
	</ui:define>
	
	<ui:define name="scripts">
	<script>
	
	/*
	var municipios = [];
	var investMunicipios = [];
	<ui:repeat var="m" value="#{brasilBean.brasil.topEmps}">
		municipios.push('#{m.municipio}');
		investMunicipios.push(#{m.investTotal});
	</ui:repeat>
	*/
	var gastoSubeixo = [];	
	var subeixos = [];	
	<ui:repeat var="m" value="#{brasilBean.brasil.gastosSubeixo}">
 		subeixos.push('#{m.subeixo}');
 		gastoSubeixo.push(#{m.valor});
	</ui:repeat>

	var estagios = [];	
	<ui:repeat var="m" value="#{brasilBean.brasil.estagioObras}">
 		estagios.push(['#{m.estagio}',#{m.quant}]);
	</ui:repeat>
		
	
/*  	$(function () {
	    $('#topMunicipiosBrasil').highcharts({
	        chart: {
	            type: 'column',
	            margin: [ 50, 50, 100, 80]
	        },
	        title: {
	            text: '<h2>Top Estados</h2>'
	        },
	        xAxis: {
	            categories: municipios,
	            labels: {
	                rotation: -45,
	                align: 'right',
	                style: {
	                    fontSize: '13px',
	                    fontFamily: 'Verdana, sans-serif'
	                }
	            }
	        },
	        yAxis: {
	            min: 0,
	            title: {
	                text: 'Gastos'
	            }
	        },
	        legend: {
	            enabled: false
	        },
	        tooltip: {
	            pointFormat: 'Gastos: <b>R$ {point.y:.1f} </b>',
	        },
	        series: [{
	            name: 'Gasto',
	            data: investMunicipios,
	            dataLabels: {
	                enabled: true,
	                rotation: -90,
	                color: '#FFFFFF',
	                align: 'right',
	                x: 4,
	                y: 10,
	                style: {
	                    fontSize: '13px',
	                    fontFamily: 'Verdana, sans-serif',
	                    textShadow: '0 0 3px black'
	                }
	            }
	        }]
	    });
	});
*/
	$(function () {
		
		
	    $('#gastoSubeixoBrasil').highcharts({
	        chart: {
	            type: 'column'
	        },
	        title: {
	            text: 'Gastos por subeixo'
	        },
	        xAxis: {
	            categories: subeixos,
	        },
	        yAxis: {
	            min: 0,
	            title: {
	                text: 'Gasto'
	            }
	        },
	        tooltip: {
	            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
	            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
	                '<td style="padding:0"><b>R$ {point.y:.1f} </b></td></tr>',
	            footerFormat: '</table>',
	            shared: true,
	            useHTML: true
	        },
	        plotOptions: {
	            column: {
	                pointPadding: 0.2,
	                borderWidth: 0
	            }
	        },
	        series: [{
	            name: '#{brasilBean.brasil.nome}',
	            data: gastoSubeixo

	        }]
	    });
	});

	
					$(function () {
						
						// Radialize the colors
						Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
						    return {
						        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
						        stops: [
						            [0, color],
						            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
						        ]
						    };
						});
						
						// Build the chart
					    $('#andamentoEmpBrasil').highcharts({
					        chart: {
					            plotBackgroundColor: null,
					            plotBorderWidth: null,
					            plotShadow: false
					        },
					        title: {
					            text: 'Andamento dos Empreendimentos'
					        },
					        tooltip: {
					    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
					        },
					        plotOptions: {
					            pie: {
					                allowPointSelect: true,
					                cursor: 'pointer',
					                dataLabels: {
					                    enabled: true,
					                    color: '#000000',
					                    connectorColor: '#000000',
					                    formatter: function() {
					                        return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
					                    }
					                }
					            }
					        },
					        series: [{
					            type: 'pie',
					            name: 'Representa',
					            data: estagios
					        }]
					    });
					});
	
	
	
	</script>
	</ui:define>
</ui:composition>
</html>